<extend name="Public/base" />
<block name="content">
    <div style="margin-top:2%;padding-left:35%">
        <button onclick="add()" class="button tiny addmenuss">添加菜单</button>&nbsp;&nbsp;&nbsp;
        <button onclick="unSelect()" class="button tiny">反选</button>&nbsp;&nbsp;&nbsp;
        <button onclick="delLot()" class="button tiny">删除(批量)</button>
    </div>
    <table id="menusTbl" style="margin-left: 8%">
        <thead >
            <th><input  onclick="selectAll(this)" type="checkbox"></th>
            <th style="text-align: center;width:4rem">编号</th>
            <th style="text-align: center;width:12rem">菜单名称</th>
            <th style="text-align: center;width:8rem">链接地址</th>
            <th style="text-align: center;width:12rem">上级菜单</th>
            <th style="text-align: center;width:4rem">分组</th>
            <th style="text-align: center;width:4rem">排序</th>
            <th style="text-align: center;width:4rem">新窗口打开</th>
            <th style="text-align: center;width:4rem">锁定</th>
            <th style="text-align: center;width:8rem"> 操作</th>
        </thead>

        <tbody id="tbodys">
        <volist name="navs" id="nav">
            <tr id="row_<{$nav.menu_id}>">
                <td><input class="slct" type="checkbox" value="<{$nav.menu_id}>"></td>
                <td><{$nav.menu_id}></td>
                <td><input name="mname" style="height:25px" class="es" disabled type="text" value="<{$nav.mname}>"></td>
                <td><input name="url" style="height:25px" class="es" disabled type="text" value="<{$nav.url}>"></td>
                <td>
                    <input name="up" style="height:25px" class="es" disabled style="width:4em;" type="text" value="<{$upname[$nav['up']]}>">
                </td>
                <td><input name="mgroup" style="height:25px" class="es" disabled style="width:4em;" type="text" value="<{$nav.mgroup}>"></td>
                <td><input name="msort" style="height:25px" class="es" disabled style="width:4em;" type="text" value="<{$nav.msort}>"></td>
                <td>
                    <div class="switch tiny round " >
                        <input onclick="target(this)" value="<{$nav.menu_id}>" id="target_<{$nav.menu_id}>" type="checkbox"  <{$nav['target']=='_blank'?'checked':''}>>
                        <label for="target_<{$nav.menu_id}>"></label>
                    </div>
                </td>

                <th>
                    <div class="switch tiny round">
                        <input onclick="lock(this)" value="<{$nav.menu_id}>" id="lock_<{$nav.menu_id}>" type="checkbox"  <{$nav['lock']?'checked':''}>>
                        <label for="lock_<{$nav.menu_id}>"></label>
                    </div>
                </th>
                <td>
                    <button onclick="edit('row_<{$nav.menu_id}>')" class="button tiny edit radius" style="height:25px;line-height:6px">编辑</button>
                    <button onclick="save('<{$nav.menu_id}>')" style="display: none;height:25px;line-height:6px" class="button tiny save radius">保存</button>
                </td>
            </tr>
        </volist>
        </tbody>
    </table>
    <div id="page"  style="text-align:center">
        <for start="1" end="$pages+1" >
            <span data-val="<{$i}>" style="cursor:pointer"><{$i}>&nbsp;&nbsp;</span>
        </for>
    </div>
    <script>
        //全选
        function selectAll(obj) {
            $('#menusTbl tbody .slct').prop('checked',$(obj).prop('checked'));
        }
        //反选
        function unSelect() {
            $('#menusTbl tbody .slct').map(function(){
                $(this).prop('checked',!$(this).prop('checked'));
            });
        }

        //批量删除
        function delLot() {
           if($('#menusTbl tbody .slct:checked')['length']){
            if(confirm('确定删除吗?')){
            var ids = $('#menusTbl tbody .slct:checked').map(function () {
                $(this).parent().parent().remove();
                return $(this).val();
            });
            ids  = ids.get().join();
            $.post('<{:U("doDelMenu")}>',{ids:ids},function (data) {
                alert(data.msg);
            });
        }}}

        //锁定
        function lock(obj) {
            var id = $(obj).val();
            var lockval = $(obj).prop('checked')?1:0;
            $.post('<{:U("doEditMenu")}>',{menu_id:id,lock:lockval});
        }

        //是否新窗口打开
        function target(obj) {
            var id = $(obj).val();
            var targetval = $(obj).prop('checked')?'_blank':'_self';
            $.post('<{:U("doEditMenu")}>',{menu_id:id,target:targetval},function (data) {
                if(data.error!==0){
                    alert(data.msg);
                }
            });
        }

        function edit(rowid) {
            $('#'+rowid+' .es').prop('disabled',false);
            $('#'+rowid+' .edit').hide();
            $('#'+rowid+' .save').show();
        }

        function save(id) {
            $('#row_'+id+' .es').prop('disabled',true);
            $('#row_'+id+' .edit').show();
            $('#row_'+id+' .save').hide();

            var data = {
                menu_id:id,
                mname:$('#row_'+id+' [name=mname]').val(),
                url:  $('#row_'+id+' [name=url]').val(),
                mgroup :  $('#row_'+id+' [name=mgroup]').val(),
                msort :  $('#row_'+id+' [name=msort]').val(),
                up : $('#row_'+id+' [name=up]').val(),
            }

            $.post('<{:U("doEditMenu")}>',data,function (data) {
                if(data.error!==0){
                    alert(data.msg);
                }
            });

        }
        //添加
        function add(){
            newRows="<tr id='addsss'>"
                            +"<td></td>"
                            +"<td></td>"
                            +"<td><input class='mnameAdd' style='height:25px' class='es' type='text'></td>"
                            +"<td><input class='urlAdd' style='height:25px' class='es' type='text'></td>"
                            + "<td>"
                            +"<select class='upAdd'  style='width:6em;height:35px'>"
                            +"<option selected value='0'>顶级</option>"
                            +"<volist name='addnavs' id='addnav'>"
                            +"<if condition='$addnav.up eq 0' >"
                            +"<option value=<{$addnav['menu_id']}>><{$addnav['mname']}></option>"
                            +"</if>"
                            +"</volist>"
                            +"</select>"
                            +"</td>"
                            +"<td><input class='mgroupAdd' style='height:25px' disabled style='width:4em;' type='text' value=<{$maxgp+1}> ></td>"
                            +"<td><input class='msortAdd' style='height:25px' class='es' style='width:4em;' type='text'></td>"
                            +"<td>"
                            +" <div class='switch tiny round ' >"
                            +"<input  id='targets' type='checkbox'  class='targetAdd' checked>"
                            +"<label for='targets'></label>"
                            +"</div>"
                            +"</td>"
                            +"<td>"
                            +" <div class='switch tiny round ' >"
                            +"<input  id='locks' type='checkbox'  class='lockAdd'>"
                            +"<label for='locks'></label>"
                            +"</div>"
                            +"</td>"
                            +"<td>"
                            +"<button onclick='addMenus()' class='button tiny edit radius' style='height:25px;line-height:6px'>添加</button><br />"
                            +"<button onclick='canelAddMenus()' class='button tiny edit radius' style='height:25px;line-height:6px'>取消</button>"
                            +"</td>"
                            +"</tr>"
            ;
            $("#menusTbl").append(newRows);
            $('.upAdd').change(function(){
                var b=$('#row_'+$('.upAdd option:selected').val()+' td:eq(5) input').val();
                if($('#row_'+$('.upAdd option:selected').val()+' td:eq(5) input').val()) {
                    $('.mgroupAdd').val(b);
                }else{
                    $('.mgroupAdd').val("<{$maxgp+1}>");
                }
            });
            $('.addmenuss').hide();
        }
        function canelAddMenus(){
            $('#addsss').remove();
            $('.addmenuss').show();
        }
        function addMenus(){
            var data = {
                mname:$('.mnameAdd').val(),
                url:  $('.urlAdd').val(),
                mgroup :  $('.mgroupAdd').val(),
                msort :  $('.msortAdd').val(),
                up : $('.upAdd').val(),
                target:$('.targetAdd').prop('checked')?'_blank':'_self',
                lock:$('.lockAdd').prop('checked')?1:0,
            }

            $.post('<{:U("doAddMenu")}>',data,function (data) {
                if(data.error!==0){
                    alert(data.msg);

                }
            });
            $('#addsss').remove();
            $('.addmenuss').show();
        }
        //分页
        $('#page span').click( function () {
            var pagenum = $(this).attr('data-val');
            $.get('<{:U("getShow")}>',{p:pagenum},function (data) {
                var html='';
                for(var i in data){
                    sy=data[i]['target']=='_blank'?'checked>':'>';
                    xy=data[i]['lock']==1?'checked>':'>';
                    html +='<tr id="row_'+data[i].menu_id+'">'
                            +'<td><input class="slct" type="checkbox" value="'+data[i].menu_id+'"></td>'
                            +'<td>'+data[i].menu_id+'</td>'
                            +'<td>'
                            +'<input name="mname" style="height:25px" class="es" disabled type="text" value="'+data[i].mname+'">'
                            +'</td>'
                            +'<td>'
                            +'<input name="url" style="height:25px" class="es" disabled type="text" value="'+data[i].url+'">'
                            +'</td>'
                            +'<td>'
                            +'<input name="up" style="height:25px" class="es" disabled style="width:4em;" type="text" value="'+data[i].up+'">'
                            +'</td>'
                            +'<td>'
                            +'<input name="mgroup" style="height:25px" class="es" disabled style="width:4em;" type="text" value="'+data[i].mgroup+'">'
                            +'</td>'
                            +'<td>'
                            +'<input name="msort" style="height:25px" class="es" disabled style="width:4em;" type="text" value="'+data[i].msort+'">'
                            +'</td>'
                            +'<td>'
                            +'<div class="switch tiny round " >'
                            +'<input onclick="target(this)" value="'+data[i].menu_id+'" id="target_'+data[i].menu_id+'" type="checkbox"  '+sy
                            +'<label for="target_'+data[i].menu_id+'">'
                            +'</label>'
                            +'</div>'
                            +'</td>'
                            +'<th>'
                            +'<div class="switch tiny round">'
                            +'<input onclick="lock(this)" value="'+data[i].menu_id+'" id="lock_'+data[i].menu_id+'" type="checkbox"  '+xy
                            +'<label for="lock_'+data[i].menu_id+'"></label>'
                            +'</div>'
                            +'</th>'
                            +'<td>'
                            +'<button onclick="edit('+"'row_"+data[i].menu_id+"'"+')" class="button tiny edit radius" style="height:25px;line-height:6px">编辑</button>'
                            +'<button onclick="save('+"'"+data[i].menu_id+"'"+')" style="display: none;height:25px;line-height:6px" class="button tiny save radius">保存</button>'
                            +'</td>'
                            +'</tr>'

                    ;
                }
                $('#menusTbl #tbodys').html(html);
            });
        } );
    </script>
</block>